<template>
  <!-- 添加默认样式和动态选择样式 -->
  <button
    ref="_ref"
    class="vk-button"
    :class="{
      [`vk-button--${type}`]: type,
      [`vk-button--${size}`]: size,
      'is-plain': plain,
      'is-round': round,
      'is-circle': circle,
      'is-disabled': disabled,
      'is-loading': loading,
    }"
    :disabled="disabled || loading"
    :autofocus="autofocus"
    :type="nativeType"
  >
  <Icon icon="spinner" spin v-if="loading"/>
  <Icon :icon="icon" v-if="icon"/>
    <span>
      <slot></slot>
    </span>
  </button>
</template>




<script setup lang="ts">
import type { ButtonProps } from './types'
import {ref} from 'vue'
import Icon from'../Icon/IconMain.vue'

defineOptions({
  name: 'VkButton',
})

// nativeType默认值为button
withDefaults(defineProps<ButtonProps>(),{
  nativeType: 'button',
})
// 把button组件暴露出去，让父组件能够直接操作这个按钮的 DOM 元素。
const _ref=ref<HTMLButtonElement>()
defineExpose({
  ref:_ref
})

</script>






<style>
</style>
